@gray: #333;
@color: #4482ff;
@color2: #49b0ff;
@color3: #7680ff;

@baseWidth: 720;
.px2rem(@atr,@px,@base-width:0) when( @base-width > 0){
@{atr}: unit(@px*10/@base-width , rem);
}

.px2rem(@atr,@px,@base-width:0) when( @base-width = 0){
@{atr}: unit(@px*10/@baseWidth , rem);
}

@gray: #333;
@color: #fff;

@color1: #4482ff;
@color2: #49b0ff;
@color3: #7680ff;
@color4: #8a5cfd;

@baseWidth: 720;
.px2rem(@atr,@px,@base-width:0) when( @base-width > 0){
@{atr}: unit(@px*10/@base-width , rem);
}

.px2rem(@atr,@px,@base-width:0) when( @base-width = 0){
@{atr}: unit(@px*10/@baseWidth , rem);
}

.Basic{
  
  .items{
    position: relative;
    text-align: left;
    color: @color;
    box-sizing: border-box;
    .px2rem(border-radius, 12);
    .px2rem(margin-top, 12);
    .px2rem(margin-bottom, 12);
    .px2rem(padding, 22);
    display: flex;
    background: -webkit-linear-gradient(right, #4482ff, #14c2ff);
    overflow: hidden;
    
    .icon{
      .px2rem(font-size, 30);
      .px2rem(line-height, 48);
      .px2rem(height, 48);
      .px2rem(width, 48);
      .px2rem(margin-right, 12);
      .px2rem(margin-top, 4);
      border-radius: 50%;
      background-color: #fff;
      color: #1cb8ff;
      text-align: center;
      overflow: hidden;
      i{
        vertical-align: middle;
      }
    }
    .back{
      position: absolute;
      .px2rem(right, -12);
      .px2rem(bottom, -18);
      .px2rem(font-size, 86);
      color: #65a1ff;
    }
    &:nth-child(3n-1){
      background: -webkit-linear-gradient(right, #35c6cd, #4fd7ba);
      .icon{
        color: #4cd4bd;
      }
      .back{
        color: #61d3d5;
      }
    }
    &:nth-child(3n){
      background: -webkit-linear-gradient(right, #5a7df8, #a9abfa);
      .icon{ color: #9ca4fa; }
      .back{ color: #8099f9; }
    }

    &.col-12{
      width: 47%;
      flex: 0 0 auto;
      float: left;
      &:nth-child(2n){
        float: right;
      }
    }
    .inner{
      flex: 1;
      .num{
        font-weight: normal;
        .px2rem(font-size, 28);
        .px2rem(line-height, 32);
      }
      .text{
        .px2rem(font-size, 18);
        .px2rem(line-height, 20);
        .px2rem(margin-bottom, 3);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        display: block;
      }
    }
  }
}